<template>
<div class="sign-mod-CommonTable">
    <!-- 编辑模式 -->
    <div class="sign-mod-edit">
        <table class="common-table-mod">
            <thead class="common-table-thead">
                <tr>
                    <td v-if='tempData.showLineCount >= 1'><input class='td-input' v-model='tempData.headData.line01' /></td>
                    <td v-if='tempData.showLineCount >= 2'><input class='td-input' v-model='tempData.headData.line02' /></td>
                    <td v-if='tempData.showLineCount >= 3'><input class='td-input' v-model='tempData.headData.line03' /></td>
                    <td v-if='tempData.showLineCount >= 4'><input class='td-input' v-model='tempData.headData.line04' /></td>
                    <td v-if='tempData.showLineCount >= 5'><input class='td-input' v-model='tempData.headData.line05' /></td>
                    <td v-if='tempData.showLineCount >= 6'><input class='td-input' v-model='tempData.headData.line06' /></td>
                    <td v-if='tempData.showLineCount >= 7'><input class='td-input' v-model='tempData.headData.line07' /></td>
                    <td v-if='tempData.showLineCount >= 8'><input class='td-input' v-model='tempData.headData.line08' /></td>
                    <td v-if='tempData.showLineCount >= 9'><input class='td-input' v-model='tempData.headData.line09' /></td>
                    <td v-if='tempData.showLineCount >= 10'><input class='td-input' v-model='tempData.headData.line10' /></td>

                    <td v-if='tempData.showLineCount >= 11'><input class='td-input' v-model='tempData.headData.line11' /></td>
                    <td v-if='tempData.showLineCount >= 12'><input class='td-input' v-model='tempData.headData.line12' /></td>
                    <td v-if='tempData.showLineCount >= 13'><input class='td-input' v-model='tempData.headData.line13' /></td>
                    <td v-if='tempData.showLineCount >= 14'><input class='td-input' v-model='tempData.headData.line14' /></td>
                    <td v-if='tempData.showLineCount >= 15'><input class='td-input' v-model='tempData.headData.line15' /></td>
                    <td v-if='tempData.showLineCount >= 16'><input class='td-input' v-model='tempData.headData.line16' /></td>
                    <td v-if='tempData.showLineCount >= 17'><input class='td-input' v-model='tempData.headData.line17' /></td>
                    <td v-if='tempData.showLineCount >= 18'><input class='td-input' v-model='tempData.headData.line18' /></td>
                    <td v-if='tempData.showLineCount >= 19'><input class='td-input' v-model='tempData.headData.line19' /></td>
                    <td v-if='tempData.showLineCount >= 20'><input class='td-input' v-model='tempData.headData.line20' /></td>

                    <td class="hide-for-edit-cont">操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for='(tempItem, $index) in tempData.listData'>
                    <td v-if='tempData.showLineCount >= 1'><input class='td-input' v-model='tempItem.line01' /></td>
                    <td v-if='tempData.showLineCount >= 2'><input class='td-input' v-model='tempItem.line02' /></td>
                    <td v-if='tempData.showLineCount >= 3'><input class='td-input' v-model='tempItem.line03' /></td>
                    <td v-if='tempData.showLineCount >= 4'><input class='td-input' v-model='tempItem.line04' /></td>
                    <td v-if='tempData.showLineCount >= 5'><input class='td-input' v-model='tempItem.line05' /></td>
                    <td v-if='tempData.showLineCount >= 6'><input class='td-input' v-model='tempItem.line06' /></td>
                    <td v-if='tempData.showLineCount >= 7'><input class='td-input' v-model='tempItem.line07' /></td>
                    <td v-if='tempData.showLineCount >= 8'><input class='td-input' v-model='tempItem.line08' /></td>
                    <td v-if='tempData.showLineCount >= 9'><input class='td-input' v-model='tempItem.line09' /></td>
                    <td v-if='tempData.showLineCount >= 10'><input class='td-input' v-model='tempItem.line10' /></td>

                    <td v-if='tempData.showLineCount >= 11'><input class='td-input' v-model='tempItem.line11' /></td>
                    <td v-if='tempData.showLineCount >= 12'><input class='td-input' v-model='tempItem.line12' /></td>
                    <td v-if='tempData.showLineCount >= 13'><input class='td-input' v-model='tempItem.line13' /></td>
                    <td v-if='tempData.showLineCount >= 14'><input class='td-input' v-model='tempItem.line14' /></td>
                    <td v-if='tempData.showLineCount >= 15'><input class='td-input' v-model='tempItem.line15' /></td>
                    <td v-if='tempData.showLineCount >= 16'><input class='td-input' v-model='tempItem.line16' /></td>
                    <td v-if='tempData.showLineCount >= 17'><input class='td-input' v-model='tempItem.line17' /></td>
                    <td v-if='tempData.showLineCount >= 18'><input class='td-input' v-model='tempItem.line18' /></td>
                    <td v-if='tempData.showLineCount >= 19'><input class='td-input' v-model='tempItem.line19' /></td>
                    <td v-if='tempData.showLineCount >= 20'><input class='td-input' v-model='tempItem.line20' /></td>
                    <td class="hide-for-edit-cont">
                        <Button type="dashed" @click='delSignItem($index)'>删除</Button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class='sign-add-btn-line hide-for-edit-cont'>
            <Button type='primary' @click='addSignItem'>添加</Button>
        </div>
    </div>
    <!-- 预览模式 -->
    <div class="sign-mod-prev">
        <table class="common-table-mod">
            <thead class="common-table-thead">
                <tr>
                    <td v-if='tempData.showLineCount >= 1'><div class="td-text">{{tempData.headData.line01}}</div></td>
                    <td v-if='tempData.showLineCount >= 2'>{{tempData.headData.line02}}</td>
                    <td v-if='tempData.showLineCount >= 3'>{{tempData.headData.line03}}</td>
                    <td v-if='tempData.showLineCount >= 4'>{{tempData.headData.line04}}</td>
                    <td v-if='tempData.showLineCount >= 5'>{{tempData.headData.line05}}</td>
                    <td v-if='tempData.showLineCount >= 6'>{{tempData.headData.line06}}</td>
                    <td v-if='tempData.showLineCount >= 7'>{{tempData.headData.line07}}</td>
                    <td v-if='tempData.showLineCount >= 8'>{{tempData.headData.line08}}</td>
                    <td v-if='tempData.showLineCount >= 9'>{{tempData.headData.line09}}</td>
                    <td v-if='tempData.showLineCount >= 10'>{{tempData.headData.line10}}</td>

                    <td v-if='tempData.showLineCount >= 11'>{{tempData.headData.line11}}</td>
                    <td v-if='tempData.showLineCount >= 12'>{{tempData.headData.line12}}</td>
                    <td v-if='tempData.showLineCount >= 13'>{{tempData.headData.line13}}</td>
                    <td v-if='tempData.showLineCount >= 14'>{{tempData.headData.line14}}</td>
                    <td v-if='tempData.showLineCount >= 15'>{{tempData.headData.line15}}</td>
                    <td v-if='tempData.showLineCount >= 16'>{{tempData.headData.line16}}</td>
                    <td v-if='tempData.showLineCount >= 17'>{{tempData.headData.line17}}</td>
                    <td v-if='tempData.showLineCount >= 18'>{{tempData.headData.line18}}</td>
                    <td v-if='tempData.showLineCount >= 19'>{{tempData.headData.line19}}</td>
                    <td v-if='tempData.showLineCount >= 20'>{{tempData.headData.line20}}</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for='tempItem in tempData.listData'>
                    <td v-if='tempData.showLineCount >= 1'><div class="td-text">{{tempItem.line01}}</div></td>
                    <td v-if='tempData.showLineCount >= 2'>{{tempItem.line02}}</td>
                    <td v-if='tempData.showLineCount >= 3'>{{tempItem.line03}}</td>
                    <td v-if='tempData.showLineCount >= 4'>{{tempItem.line04}}</td>
                    <td v-if='tempData.showLineCount >= 5'>{{tempItem.line05}}</td>
                    <td v-if='tempData.showLineCount >= 6'>{{tempItem.line06}}</td>
                    <td v-if='tempData.showLineCount >= 7'>{{tempItem.line07}}</td>
                    <td v-if='tempData.showLineCount >= 8'>{{tempItem.line08}}</td>
                    <td v-if='tempData.showLineCount >= 9'>{{tempItem.line09}}</td>
                    <td v-if='tempData.showLineCount >= 10'>{{tempItem.line10}}</td>

                    <td v-if='tempData.showLineCount >= 11'>{{tempItem.line11}}</td>
                    <td v-if='tempData.showLineCount >= 12'>{{tempItem.line12}}</td>
                    <td v-if='tempData.showLineCount >= 13'>{{tempItem.line13}}</td>
                    <td v-if='tempData.showLineCount >= 14'>{{tempItem.line14}}</td>
                    <td v-if='tempData.showLineCount >= 15'>{{tempItem.line15}}</td>
                    <td v-if='tempData.showLineCount >= 16'>{{tempItem.line16}}</td>
                    <td v-if='tempData.showLineCount >= 17'>{{tempItem.line17}}</td>
                    <td v-if='tempData.showLineCount >= 18'>{{tempItem.line18}}</td>
                    <td v-if='tempData.showLineCount >= 19'>{{tempItem.line19}}</td>
                    <td v-if='tempData.showLineCount >= 20'>{{tempItem.line20}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</template>

<script>
export default {
    name: 'CommonTable',
    mounted () {
    },
    props: {
        // 列表数据
        tempData: {
            type: Object,
            default : function () {
                return {
                    showLineCount: 10,
                    headData: {
                        line1: '',
                        line2: '',
                        line3: ''
                    },
                    listData: []
                };
            }
        },
        // 模板id
        templateId: {
            type: String,
            default : function () {
                return '';
            }
        },
        // 内容id
        briefingDetailId: {
            type: String,
            default : function () {
                return '';
            }
        }
    },
    data () {
        return {
        }
    },
    methods: {
        // 供子级调用(点击子级的按钮更新数据)-更新子数据
        updateSignTempData (tempData) {
            this.$emit('updateSignTempData', tempData);
            console.log('updateSignTempData:');
            console.log(tempData);
        },
        // 供父级调用(点击父级的保存按钮 tempData.isSaveInChild 为true时调用)-调用子级的保存函数
        saveSignTempForChild () {
            console.log('saveSignTempForChild:');
            console.log(this.tempData);
        },

        // 添加单行
        addSignItem () {
            let tempData = JSON.parse(JSON.stringify(this.tempData));
            tempData.listData.push({
                line1: '',
                line2: '',
                line3: ''
            });
            
            this.$emit('updateSignTempData', tempData);
        },
        // 删除单行
        delSignItem (index) {
            let tempData = JSON.parse(JSON.stringify(this.tempData));
            tempData.listData.splice(index, 1);

            this.$emit('updateSignTempData', tempData);
        },
    },
    
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.sign-mod-CommonTable .sign-mod-edit{ background-color: #f5f5f5; }
.sign-mod-CommonTable{ position: relative;}
.sign-mod-CommonTable .sign-add-btn-line{ margin-top: 10px; }
.sign-mod-CommonTable td > input{ width: 100%; color: inherit; }
</style>
